<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>发起事项</title>

	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			background-color: #F4F7FA;
			font-size: 1rem;
		}
		.up{
			width: 100vw;
			height: 8vh;
      color: #5383ec;
			background-color: white;
		}
		.up-text{
			width: 45vw;
			height: 7.5vh;
			font-size: 1rem;
			margin-left: 1vw;
      text-align: center;
      line-height: 7.5vh;
      /* display: flex;
      align-items: center; */
			border-bottom: 3px solid #5383ec;
		}
		.topic{
      width: 100vw;
      height: 5vh;
      font-size: 0.8rem;
      line-height: 5vh;
      margin-top: 1.5vh;
      /* margin-left: 3vw; */
      padding-left: 3vw;
      background-color: white;
      font-weight: bold;
		}
    .topic img{
      width: 2vh;
      height: 2vh;
      margin-right: 1vw;
      transform: translateY(10%);
    }
    .info-title{
      color: #888;
      margin-left: 3vw;
      margin-top: 2vw;
      margin-bottom: 2vw;
    }
    .info-text{
      width: 100vw;
      height: 6vh;
      color: #76777a;
      line-height: 6vh;
      background-color: white;
      text-align: center;
    }
    .QR-code{
      width: 100vw;
      color: #76777a;
      background-color: white;
      text-align: center;
      padding-top: 5%;
      padding-bottom: 5%;
    }
    .QR-code img{
      width: 40vw;
      height: 40vw;
    }
    .permit{
      font-weight: bold;
      font-size: 1.2rem;
      color: green;
    }
    .info-last{
      margin-bottom: 10vh;
    }
    .footer{
      position: fixed;
      bottom: 0;
      left: 0;
      padding-left: 2vw;
      padding-top: 4vw;
      padding-bottom: 2vw;
      width: 100vw;
      height: 5vh;
      background-color: white;
    }
    .gengduo{
      width: 22vw;
      height: 4.8vh;
      border: 1px solid #5383ec;
      border-radius: 50px;
      color: #5383ec;
      text-align: center;
      line-height: 5vh;
    }
    .input-box{
      width: 80vw;
      height: 40vh;
      margin-top: 10vh;
      margin-left: 10vw;
      margin-bottom: 5vh;
      padding-bottom: 1vh;
      border: 5px solid #5383ec;
      border-radius: 50px;
      font-size: 1.2rem;
    }
    .input-box div{
      width: 70vw;
      height: 5vh;
      margin: 0 auto;
      text-align: center;
    }
    button{
      margin-right: 2vw;
      margin-top: 5vh;
    }

    .info-color-box {
      width: 100vw;
      height: 5vh;
      color: #76777a;
      padding-top: 1vh;
      background-color: white;
      text-align: center;
    }
    .info-color {
      width: 90vw;
      height: 4vh;
      margin-left: 5vw;
      background-color: #77d;
    }

    #info-pic {
      height: 16vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #info-pic img {
      width: 12vh;
      height: 12vh;
    }
    .content {
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
    }
	</style>
</head>
<body>
  <div class="input-box" id="input-box" style="text-align: center;">
    <p style="font-size: 3rem;">反复横跳！</p>
    <div>你的名字：<input type="text" name="" id="input-name" placeholder="李霸天"></div>
    <div>你的学院：<input type="text" name="" id="input-aca" placeholder="信息与通信工程学院"></div>
    <div>你的学号：<input type="text" name="" id="input-number" placeholder="2020210777"></div>
    <div><button onclick="Enter(0)">“入校”</button><button onclick="Enter(1)">“出校”</button></div>
  </div>
	<div class="content" id="content" style="display: none;">
		<!-- <div class="up">
			<div class="up-text">申请表单</div>
		</div> -->
    <div class="topic">
      <div class="topic-text"><img src="./update_files/ThxvaSW8z3mUciA.png">当前部门：信息与通信工程学院</div>
    </div>
		<div class="topic">
      <div class="topic-text"><img src="./update_files/MaA6pZekjTmNXF1.png">请假外出、返校权限查询</div>
    </div>
    <div class="infos">
      <div class="info">
        <div class="info-title">姓名</div>
        <div class="info-text" id="info-name">职科翔</div>
      </div>
      <div class="info">
        <div class="info-title">照片</div>
        <div class="info-text" id="info-pic">
          <img src="./update_files/avatar1.png" alt="">
        </div>
      </div>
      <div class="info" style="margin-top:20px">
        <div class="info-color-box">
          <div class="info-color" id="colorBox" style="background-color: rgb(0, 155, 225);"></div>
        </div>
      </div>
      <div class="info">
        <div class="info-title">状态码</div>
        <div class="QR-code"><img src="./update_files/wnPVtbi4Y9HKLXf.png"></div>
      </div>

      <div class="info" style="margin-top:20px">
        <div class="info-text permit" id="status">允许入校</div>
      </div>
      <div class="info">
        <div class="info-title">学工号</div>
        <div class="info-text" id="info-number">2021110333</div>
      </div>
      <div class="info">
        <div class="info-title">出入校时间</div>
        <div class="info-text" id="time">2022-04-02 21:22:05</div>
      </div>
      <div class="info info-last">
        <div class="info-title">学院</div>
        <div class="info-text" id="info-aca">信息与通信工程学院</div>
      </div>
    </div>
    <!-- footer使用固定布局 -->
    <div class="footer">
      <div class="gengduo">更多</div>
    </div>
  </div>
  <script type="text/javascript">
    function curDateTime() {
      var d = new Date();
      var year = d.getYear();
      var month = d.getMonth() + 1;
      var date = d.getDate();
      var day = d.getDay();
      var hours = d.getHours();
      var minutes = d.getMinutes();
      var seconds = d.getSeconds();
      var ms = d.getMilliseconds();
      var curDateTime = String(1900 + parseInt(year));
      if (month > 9)
        curDateTime = curDateTime + "-" + month;
      else
        curDateTime = curDateTime + "-0" + month;
      if (date > 9)
        curDateTime = curDateTime + "-" + date;
      else
        curDateTime = curDateTime + "-0" + date;
      if (hours > 9)
        curDateTime = curDateTime + " " + hours;
      else
        curDateTime = curDateTime + "0" + hours;
      if (minutes > 9)
        curDateTime = curDateTime + ":" + minutes;
      else
        curDateTime = curDateTime + ":0" + minutes;
      if (seconds > 9)
        curDateTime = curDateTime + ":" + seconds;
      else
        curDateTime = curDateTime + ":0" + seconds;
      return curDateTime;
    };
    curTime = curDateTime();
    
    function Enter(e) {
      console.log(e)
      var name = document.getElementById("input-name").value;
      var aca = document.getElementById("input-aca").value;
      var number = document.getElementById("input-number").value;

      document.getElementById("content").style.display = "";
      document.getElementById("input-box").style.display = "none";

      if (name != '') {
        document.getElementById("info-name").innerHTML = name;
      }
      if (aca != '') {
        document.getElementById("info-aca").innerHTML = aca;
      }
      if (number != '') {
        document.getElementById("info-number").innerHTML = number;
      }
      var status = ['允许入校', '允许出校'];
      document.getElementById("status").innerHTML = status[parseInt(e)];
      document.getElementById("time").innerHTML = curTime;

      const colorList = [
        '#3843c5',
        '#e7171d',
        '#fcf100',
        '#009be1',
        '#1cab46',
        '#9b449c',
        '#f87a20'
      ]

      let index = 0;
      setInterval(() => {
        document.getElementById('colorBox').style.backgroundColor = colorList[index%7]
        index++;
      }, 500);
    }
  </script>

</body></html>